<template>
  <div>
    <Form inline>
      <FormItem label="">
        <Button type="primary" @click="openModal(false)">
          商品上架
        </Button>
      </FormItem>
    </Form>
    <Table :data="data" :columns="columns" />
    <Modal width="600" v-model="showModal">
      <template slot="header">
        <span>商品上架</span>
      </template>

      <Form :label-width="80">
        <FormItem label="商品名">
          <Input style="width: 400px" v-model="formItem.name" />
        </FormItem>
        <FormItem label="商品种类">
          <Select v-model="formItem.typeId" style="width:400px">
            <Option v-for="(item, index) in types" :value="item.typeId" :key="index">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="条码">
          <Input style="width: 400px" v-model="formItem.wid"/>
          <div style="color: red">条码为<a @click="$router.push('/purchase/purchaseList')">库存查询</a>中的id</div>
        </FormItem>
        <FormItem label="上架数量">
          <InputNumber v-model="formItem.number" style="width: 400px;" :min="0" :step="1" :precision="0" />
        </FormItem>
        <FormItem label="商品价格">
          <InputNumber style="width: 400px" v-model="formItem.price" :min="0">
          </InputNumber>
        </FormItem>
      </Form>

      <template slot="footer">
        <Button type="primary" @click="putGoodsOn">提交</Button>
        <Button @click="closeModal">取消</Button>
      </template>
    </Modal>
    <Modal width="600" v-model="showSuppleModal">
      <template slot="header">
        <span>商品补货</span>
      </template>

      <Form :label-width="100">
        <FormItem label="商品ID">
          <Input disabled style="width: 400px;" :value="suppleForm.add_id"/>
        </FormItem>
        <FormItem label="补货数量">
          <InputNumber style="width: 400px;" :min="0" :step="1" :precision="0" v-model="suppleForm.number" />
        </FormItem>
        <FormItem label="条码">
          <Input style="width: 400px" v-model="suppleForm.wid"/>
          <div style="color: red">条码为<a @click="$router.push('/purchase/purchaseList')">库存查询</a>中的id</div>
        </FormItem>
      </Form>
      <template slot="footer">
        <Button type="primary" @click="suppleGoods">提交</Button>
        <Button @click="closeSuppleModal">取消</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
import Api from '@/api/goods'
export default {
  name: "list",
  data () {
    return {
      data: [],
      columns: [
        {
          title: '商品ID',
          key: 'gid',
          align: 'center'
        },
        {
          title: '商品名',
          key: 'name',
          align: 'center'
        },
        {
          title: '商品数量',
          key: 'number',
          align: 'center'
        },
        {
          title: '商品价格',
          key: 'price',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.price.toFixed(2))
          }
        },
        {
          title: '商品类型',
          render: (h, params) => {
            const type = this.types.filter(item => item.typeId === params.row.typeId)[0]
            return h('span', type.name)
          },
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            const suppleGoods = h('Button', {
              props: {
                type: 'primary'
              },
              on: {
                click: () => {
                  this.openSuppleModal({add_id: params.row.gid})
                }
              }
            }, '补货')
            const deleteGoods = h('Button', {
              props: {
                type: 'error'
              },
              style: {
                marginLeft: '5px'
              },
              on: {
                click: () => {
                  this.deleteGoods(params.row.gid)
                }
              }
            }, '下架')
            return h('span', [suppleGoods, deleteGoods])
          }
        }
      ],
      curPage: 1,
      pageSizeL: 20,
      total: 0,
      types: [],
      showModal: false,
      isUpdateOpt: false,
      formItem: {
        name: '',
        number: 1,
        price: 0,
        typeId: 1,
        wid: null
      },
      wid: null,
      suppleForm: {},
      showSuppleModal: false
    }
  },
  mounted() {
    this.getTypeList()
    this.list()
  },
  methods: {
    putGoodsOn () {
      if (this.formItem.name === '' || this.formItem.wid == null) {
        this.$Message.error('数据缺失')
        return
      }
      Api.putGoodsOn(this.formItem).then(
          (res) => {
            if (res.data.resultCode !== 200) {
              this.$Message.error(res.data.message)
            } else {
              this.$Message.success('上架成功')
            }
            this.closeModal()
            this.list()
          }
      )
    },
    list () {
      Api.list({ pageSize: this.pageSizeL, curPage: this.curPage}).then(res => {
        const req = res.data
        if (res.status !== 200) {
          this.$Message.error(req.msg)
        }
        this.total = req?.data?.total
        this.data = req?.data?.result
      })
    },
    getTypeList () {
      Api.getTypeList().then(res => {
        const req = res.data
        if (req.resultCode !== 200) {
          this.$Message.error(req.message)
        }
        this.types = req.data
      })
    },
    deleteGoods (gid) {
      this.$Modal.confirm({
        title: '下架商品',
        content: '真的要下架该商品吗？',
        onOk: () => {
          Api.deleteGoods(gid).then(res => {
            if (res.data.resultCode === 200) {
              this.$Message.success('下架成功')
            } else {
              this.$Message.error('error')
            }
            this.list()
          })
        }
      })
    },
    openModal (isUpdate) {
      this.isUpdateOpt = isUpdate
      this.showModal = true
    },
    closeModal () {
      this.formItem = {
        allowTotal: 1,
        instruction: ''
      }
      this.showModal = false
    },
    suppleGoods () {
      if (this.suppleForm.wid == null || this.suppleForm.number == null) {
        this.$Message.error('参数缺失')
        return
      }
      Api.suppleGoods({...this.suppleForm}).then(res => {
        if (res.data.resultCode === 200) {
          this.$Message.success('补货成功')
        } else {
          this.$Message.success('error')
        }
        this.closeSuppleModal()
      })
    },
    closeSuppleModal () {
      this.showSuppleModal = false
      this.list()
    },
    openSuppleModal (data) {
      this.showSuppleModal = true
      this.suppleForm = {...data, number: 0, wid: null}
    }
  }
}
</script>

<style scoped>

</style>
